@extends('layouts.admin-app')

@section('content')

    <div class="contentpanel panel-email">
        <div class="box">
            @include('admin.partials.errors')
            @include('admin.partials.success')
        </div>

        <div class="row">

            <div class="col-sm-9 col-lg-12">

                <div style="height:100%;">
                    <div class="contain" style="height: 500px" id="tiwen"></div>
                    <div class="contain" style="height: 500px;margin-top: 40px;" id="xueyang"></div>
                </div>
                <div>
                    <div class="panel-body panel-body-nopadding">

                    <h3>医生备注</h3>
                    @foreach($remark as $k => $v)
                        <div class="form-group">
                            <label class="col-sm-3 control-label">{{ $v->created_at }} </label>
                            <div class="col-sm-6">
                                {{ $v->remark }}
                            </div>
                        </div>
                    @endforeach
                    </div><!-- panel-body -->
                </div>

            </div><!-- col-sm-9 -->

        </div><!-- row -->

    </div>
@endsection

@section('javascript')
    <script src="{{ asset('libs/echarts/echarts-all.js') }}"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>

    <script>
        var date_tiwen = {!! json_encode($data['date_tiwen']) !!};   // 设置两个变量用来存变量
        var date_xueyang = {!! json_encode($data['date_xueyang']) !!};   // 设置两个变量用来存变量
        var tiwen = {!! json_encode($data['tiwen']) !!};   // 设置两个变量用来存变量
        var xueyangbaohedu = {!! json_encode($data['xueyang']) !!};   // 设置两个变量用来存变量
        var option = [];
        var tiwenChart = echarts.init(document.getElementById('tiwen'));
        var xueyangChart = echarts.init(document.getElementById('xueyang'));
        var yMax = 500;
        var dataShadow = [];
        for (var i = 0; i < date_tiwen.length; i++) {
            dataShadow.push(yMax);
        }

//        var xArraylength = date_tiwen.length;//获取返回数据的个数
//        function computedPosition(length,xArraylength) {
//            if(xArraylength>=10){
//                return length <= 10 ? this.end = 70  : this.end = (100 - Math.floor(70  / length * 100));
//            }else{
//                return 100;//小于十条数据显示全部
//            }
//        }

        // 实现画图的功能
        function tiwen_fun() {
            option = {
                title : {
                    text: '体温统计'
                },
                tooltip : {
                    trigger: 'axis'
                },
                legend: {
                    data:['体温']
                },
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: false},
                        dataView : {show: true, readOnly: false},
                        magicType : {show: true, type: ['line', 'bar']},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                dataZoom: [
                    {
                        type: 'slider',
                        show: true,
                        xAxisIndex: [0],
                        bottom: 0,
                        start: 0,
                        height:15,
                        end:100 ,//初始化滚动条
                        realtime:true,
                    },
                    {
                        type: 'inside',
                    }
                ],
                calculable : true,
                xAxis : [
                    {
                        axisLine: {
                            lineStyle: { color: '#333' }
                        },
                        axisLabel: {
                            rotate: 30,
                            interval: 0
                        },
                        type : 'category',
                        boundaryGap : false,
                        z: 10,
                        data : date_tiwen    // x的数据，为上个方法中得到的names
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        axisLabel : {
                            formatter: '{value}'
                        },
                        axisLine: {
                            lineStyle: { color: '#333' }
                        }
                    }
                ],
                series : [
                    {
                        name:'体温',
                        type:'line',
                        smooth: 0.3,
                        data: tiwen   // y轴的数据，由上个方法中得到的ttls
                    }
                ]
            };

            tiwenChart.hideLoading();
            // 使用刚指定的配置项和数据显示图表。
            tiwenChart.setOption(option,true);
        }
        function xueyangbaohedu_fun() {
            option = {
                title : {
                    text: '血氧饱和度统计'
                },
                tooltip : {
                    trigger: 'axis'
                },
                legend: {
                    data:['血氧']
                },
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: false},
                        dataView : {show: true, readOnly: false},
                        magicType : {show: true, type: ['line', 'bar']},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                dataZoom: [
                    {
                        type: 'slider',
                        show: true,
                        xAxisIndex: [0],
                        bottom: 0,
                        start: 0,
                        height:15,
                        end:100 ,//初始化滚动条
                        realtime:true,
                    },
                    {
                        type: 'inside',
                    }
                ],
                calculable : true,
                xAxis : [
                    {
                        axisLine: {
                            lineStyle: { color: '#333' }
                        },
                        axisLabel: {
                            rotate: 30,
                            interval: 0
                        },
                        type : 'category',
                        boundaryGap : false,
                        data : date_xueyang    // x的数据，为上个方法中得到的names
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        axisLabel : {
                            formatter: '{value}'
                        },
                        axisLine: {
                            lineStyle: { color: '#333' }
                        }
                    }
                ],
                series : [
                    {
                        name:'血氧饱和度',
                        type:'line',
                        smooth: 0.3,
                        data: xueyangbaohedu   // y轴的数据，由上个方法中得到的ttls
                    }
                ]
            };

            xueyangChart.hideLoading();
            // 使用刚指定的配置项和数据显示图表。
            xueyangChart.setOption(option,true);
        }

        setTimeout('tiwen_fun()', 500);   // 为什么加定时器？因为上面是一起执行的，可能还未取得数据，便已经将图画好了，图上就没有数据，所以这里我延迟了1s，
        setTimeout('xueyangbaohedu_fun()', 500);   // 为什么加定时器？因为上面是一起执行的，可能还未取得数据，便已经将图画好了，图上就没有数据，所以这里我延迟了1s，


    </script>

@endsection
